<template>
	<!-- 男女比例 -->
	<div class="malefemaleRatio-main">
		<div class="malefemaleRatio-header">
			<div class="man">
				<span>用户</span>
				<img src="../images/man.png" alt="" />
			</div>
			<div class="woman">
				<span>游客</span>
				<img src="../images/woman.png" alt="" />
			</div>
		</div>
		<!-- echarts -->
		<div id="MaleFemaleRatioChart" class="echarts"></div>
	</div>
</template>

<script setup lang="ts">
	import { ECharts, EChartsOption, init } from 'echarts';
	interface ChartProp {
		man: number;
		woman: number;
	}
	const initChart = (data: ChartProp): ECharts => {
		const charEle = document.getElementById(
			'MaleFemaleRatioChart'
		) as HTMLElement;
		const charEch: ECharts = init(charEle);
		const option: EChartsOption = {
			xAxis: {
				type: 'value',
				show: false
			},
			grid: {
				left: 0,
				top: '30px',
				bottom: 0,
				right: 0
			},
			yAxis: [
				{
					type: 'category',
					position: 'left',
					data: ['男生'],
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisLabel: {
						show: false
					}
				},
				{
					type: 'category',
					position: 'right',
					data: ['女士'],
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisLabel: {
						show: false,
						padding: [0, 0, 40, -60],
						fontSize: 12,
						lineHeight: 60,
						color: 'rgba(255, 255, 255, 0.9)',
						formatter: '{value}' + data.woman * 100 + '%',
						rich: {
							a: {
								color: 'transparent',
								lineHeight: 30,
								fontFamily: 'digital',
								fontSize: 12
							}
						}
					}
				}
			],
			series: [
				{
					type: 'bar',
					barWidth: 20,
					data: [data.man],
					z: 20,
					itemStyle: {
						borderRadius: 10,
						color: '#007AFE'
					},
					label: {
						show: true,
						color: '#E7E8ED',
						position: 'insideLeft',
						offset: [0, -20],
						fontSize: 12,
						formatter: () => {
							return `用户 ${data.man * 100}%`;
						}
					}
				},
				{
					type: 'bar',
					barWidth: 20,
					data: [1],
					barGap: '-100%',
					itemStyle: {
						borderRadius: 10,
						color: '#FF4B7A'
					},
					label: {
						show: true,
						color: '#E7E8ED',
						position: 'insideRight',
						offset: [0, -20],
						fontSize: 12,
						formatter: () => {
							return `游客 ${data.woman * 100}%`;
						}
					}
				}
			]
		};
		charEch.setOption(option);
		return charEch;
	};
	defineExpose({
		initChart
	});
</script>
<style lang="scss" scoped>
	.malefemaleRatio-main {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 40px 65px;
		.malefemaleRatio-header {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 115px;
			.man,
			.woman {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 110px;
				height: 115px;
				background: url('../images/man-bg.png') no-repeat;
				background-size: 100% 100%;
				img {
					width: 60px;
					height: 60px;
					margin-top: 20px;
				}
				span {
					margin-top: 2px;
					font-size: 13px;
					color: #ffffff;
				}
			}
			.woman {
				background: url('../images/woman-bg.png') no-repeat;
			}
		}
		.echarts {
			width: 100%;
			height: calc(100% - 115px);
		}
	}
</style>
